@font-face {
    font-family: 'Sarabun';

    src: 
        url('Sarabun-Regular.eot'), 
        url('Sarabun-Regular.woff') format('woff'),
        url('Sarabun-Regular.woff2') format('woff'), 
        url('Sarabun-Regular.ttf') format('truetype'),
        url('Sarabun-Italic.eot'),
        url('Sarabun-Italic.woff') format('woff'), 
        url('Sarabun-Italic.woff2') format('woff');

        font-weight: normal;
        font-style: normal;
}

@font-face {
    font-family: 'Sarabun';

    src:url('Sarabun-Thin.eot'),
    url('Sarabun-Thin.woff') format('woff'),
    url('Sarabun-Thin.woff2') format('woff'),
    url('Sarabun-Thin.ttf') format('truetype'), 
    url('Sarabun-ThinItalic.eot'),
    url('Sarabun-ThinItalic.woff') format('woff'),
    url('Sarabun-ThinItalic.woff2') format('woff'),
    url('Sarabun-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: 100;
}

@font-face {
    font-family: 'Sarabun';

    src:
    url('Sarabun-ExtraLight.eot'),
    url('Sarabun-ExtraLight.woff') format('woff'),
    url('Sarabun-ExtraLight.woff2') format('woff'),
    url('Sarabun-ExtraLightItalic.eot'),
    url('Sarabun-ExtraLightItalic.ttf') format('embedded-opentype'),
    url('Sarabun-ExtraLightItalic.woff') format('woff'),
    url('Sarabun-ExtraLightItalic.woff2') format('woff');
    font-weight: 300;
    font-style: 300;
}

@font-face {
    font-family: 'Sarabun';

    src:url('Sarabun-Light.eot'),
        url('Sarabun-Light.ttf') format('embedded-opentype'),
        url('Sarabun-Light.woff') format('woff'),
        url('Sarabun-Light.woff2') format('woff'),
        url('Sarabun-LightItalic.eot'),
        url('Sarabun-LightItalic.woff') format('woff'),
        url('Sarabun-LightItalic.woff2') format('woff');
    font-weight: 400;
    font-style: 400;
}


@font-face {
    font-family: 'Sarabun';

    src:url('Sarabun-Medium.eot'),
        url('Sarabun-Medium.woff') format('woff'),
        url('Sarabun-Medium.woff2') format('woff'),
        url('Sarabun-MediumItalic.eot'),
        url('Sarabun-MediumItalic.woff') format('woff'),
        url('Sarabun-MediumItalic.woff2') format('woff'),

        url('Sarabun-MediumItalic.ttf') format('truetype'),
        url('Sarabun-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: 500;
}


@font-face {
    font-family: 'Sarabun';
    src:url('Sarabun-SemiBold.eot'),
    url('Sarabun-SemiBold.woff') format('woff'),
    url('Sarabun-SemiBold.woff2') format('woff'),
    url('Sarabun-SemiBoldItalic.eot'),
    url('Sarabun-SemiBoldItalic.woff') format('woff'),
    url('Sarabun-SemiBoldItalic.woff2') format('woff'),
    url('Sarabun-SemiBold.ttf') format('truetype'),
    url('Sarabun-SemiBoldItalic.ttf') format('truetype');

    font-weight: 600;
    font-style: 600;
}

@font-face {
    font-family: 'Sarabun';
    src: url('Sarabun-Bold.eot'),
        url('Sarabun-Bold.woff') format('woff'),
        url('Sarabun-Bold.woff2') format('woff'),
        url('Sarabun-Bold.ttf') format('truetype'),
        url('Sarabun-BoldItalic.ttf') format('truetype');

    font-weight: 700;
    font-style: 700;
}

@font-face {
    font-family: 'Sarabun';
    src:url('Sarabun-ExtraBold.eot'),
    url('Sarabun-ExtraBold.woff') format('woff'),
    url('Sarabun-ExtraBold.woff2') format('woff'),
    url('Sarabun-ExtraBoldItalic.eot'),
    url('Sarabun-ExtraBoldItalic.ttf') format('embedded-opentype'),
    url('Sarabun-ExtraBoldItalic.woff') format('woff'),
    url('Sarabun-ExtraBoldItalic.woff2') format('woff');

    font-weight: 800;
    font-style: 800;
}